<template>
  <svg width="500" height="270">
    <!--<g class="focus" style="transform: translate(50px, 20px)">-->
    <g class="focus" :style="{transform: 'translate('+ '50' +'px, 20px)'}">
      <path :d="line"/>
    </g>
  </svg>
</template>
<script>
  import * as d3 from 'd3';

  export default {
    name: 'area-chart',
    components: {

    },
    props: {

    },
    data() {
      return {
        margin: {top: 20, right: 30, bottom: 30, left: 50},
        width: 500,
        height: 270,
        line: '',
        data: [92, 71, 0, 25, 36, 100],
//        data: [[92, 71, 0, 25, 36, 100],[34, 67, 67, 5, 96, 10]],
        baseLine: [90],
      };
    },
    mounted() {
      this.darwLine();
    },
    methods: {
      darwLine: function () {
        var svg = d3.select('svg');
        const _margin = this.margin;
        this.width = svg.attr('width') - _margin.left - _margin.right
        this.height = svg.attr('height') - _margin.top - _margin.bottom
        console.log(this.height);
        var svg = d3.select('svg');
        var g = d3.select('g');
        const x = d3.scaleLinear().domain([0, this.data.length - 1]).range([0, this.width]),
          y = d3.scaleLinear().domain([0, d3.max(this.data)]).range([this.height, 0]);
        g.append('g').attr('class', 'axis axis-x')
          .attr('transform', 'translate(0,' + this.height + ')')
          .call(d3.axisBottom(x)
            .tickArguments([5])
            .tickSize(-this.height)
            .tickPadding(10))
          .select(".domain")
          .remove();
        g.append('g').attr('class', 'axis axis-y')
          .call(d3.axisLeft(y)
            .ticks(5)
            .tickSize(-this.width)
            .tickPadding(10))
          .select(".domain")
          .remove();

        const line = d3.line()
          .x((d, i) => x(i))
          .y(d => y(d));
        /*if(!(this.data[0] instanceof Array)){
          var tempArr = [];
          tempArr.push(this.data);
          this.data = tempArr;
        }*/
        /*(d, i) =>*/
        this.line = line(this.data);
      },
    },
  };
</script>
<style>
  svg{
    border: solid 1px red;
  }
  .line {
    /*transform: translate(0,270px);*/
  }

  path {
    fill: none;
    stroke: #76BF8A;
    stroke-width: 3px;
  }

  .axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }

  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }

  .axis-x .tick line {
    stroke: #000;
    stroke-opacity: 0.25;
  }
  .axis-y .tick line {
    stroke: #000;
    stroke-opacity: 0.25;
  }

  .axis-x text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
